<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Materials — Space.js</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
    <link rel="stylesheet" href="../assets/css/style.css">

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three/build/three.module.js",
                "three/addons/": "https://unpkg.com/three/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        import { BoxGeometry, Color, HemisphereLight, Mesh, MeshNormalMaterial, PerspectiveCamera, Scene, WebGLRenderer } from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // init

        const renderer = new WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const scene = new Scene();
        scene.background = new Color(0x0e0e0e);

        const camera = new PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.z = 10;

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        // lights

        scene.add(new HemisphereLight(0xffffff, 0x888888, 3));

        // mesh

        const geometry = new BoxGeometry();
        geometry.computeTangents();

        const material = new MeshNormalMaterial();

        const mesh = new Mesh(geometry, material);
        scene.add(mesh);

        // panel

        import { MaterialPanelController, Point3D, UI } from '../../src/three.js';

        const ui = new UI({ fps: true });
        ui.animateIn();
        document.body.appendChild(ui.element);

        Point3D.init(scene, camera);

        const point = new Point3D(mesh);
        scene.add(point);

        MaterialPanelController.init(mesh, point);

        // animation

        function animate(time) {
            requestAnimationFrame(animate);

            time = time * 0.001; // seconds

            mesh.rotation.x = time / 2;
            mesh.rotation.y = time;

            controls.update();

            renderer.render(scene, camera);

            Point3D.update(time);
            ui.update();
        }

        requestAnimationFrame(animate);

        // resize

        window.addEventListener('resize', onWindowResize);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</head>
<body>
</body>
</html>
